<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>23软件三班 2340303007 老木 待办</title>
    <style>
*{

	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
}
body 
{
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background-image: url(./6.jpg);
}
.box 
{
	position: relative;
	width: 450px;
	height: 550px;
	border-radius: 30px;
	background: #2f363e;
	padding: 30px 50px;
	box-shadow: 25px 25px 75px rgba(0,0,0,0.25),
	10px 10px 70px rgba(0,0,0,0.25),
	inset 5px 5px 10px palegreen;
	inset 5px 5px 20px plum;
	inset -5px -5px 15px blue;
}
h2 
{
	width: 100%;
	font-weight: 600;
	text-align: center;
	color: #fff;
	font-size: 1.75em;
	margin-bottom: 10px;
}
#inputBx 
{
	position: relative;
	width: 100%;
	border: none;
	outline: none;
	padding: 15px 20px;
	border-radius: 30px;
	font-size: 1em;
	box-shadow: 5px 5px 7px orange, inset 2px 2px 5px lawngreen, inset -3px -3px 5px rgba(0,0,0,0.5);
}
.box li 
{
	position: relative;
	width: calc(100% - 40px);
	display: flex;
	align-items: center;
	background: #1f83f2;
	margin: 15px 0;
	padding: 10px 10px 10px 45px;
	min-height: 45px;
	cursor: pointer;
	border-radius: 22.5px;
	color: #fff;
	box-shadow: 5px 5px 7px rgba(0,0,0,0.25), inset 2px 2px 5px rgba(0,0,0,0.5), inset -3px -3px 5px rgba(0,0,0,0.5);
}

.box li i 
{
	position: absolute;
	right: -40px;
	width: 30px;
	height: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #ff2c74;
	border-radius: 50%;
	box-shadow: 5px 5px 7px rgba(0,0,0,0.25), inset 2px 2px 5px rgba(255,255,255,0.25), inset -3px -3px 5px rgba(0,0,0,0.5);

}
.box li i::before 
{
	content: '';
	position: absolute;
	width: 15px;
	height: 2px;
	background: #fff;
	transform: rotate(45deg);
}
.box li i::after 
{
	content: '';
	position: absolute;
	width: 15px;
	height: 2px;
	background: #fff;
	transform: rotate(-45deg);
}
.box li::before 
{
	content: '';
	position: absolute;
	left: 8px;
	width: 30px;
	height: 30px;
	background: #2f363e;
	border-radius: 50%;
}
.box li.done 
{
	background: #607d8b;
}
.box li.done:after 
{
	content: '';
	position: absolute;
	left: 16px;
	width: 12px;
	height: 6px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(315deg);
}
#list 
{
	position: relative;
	margin-top: 20px;
	height: 350px;
	overflow-y: auto;
	padding-right: 10px;
}
::-webkit-scrollbar-track 
{
	box-shadow: inset 0 0 15px rgba(0,0,0,0.5);
}
::-webkit-scrollbar 
{
	width: 5px;
}
::-webkit-scrollbar-thumb 
{
	background: #fff;
}
</style>
<head>
    <style>
        *
{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
}
body 
{
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background-image: url(./图片.jpg);
}
.box 
{
	position: relative;
	width: 450px;
	height: 550px;
	border-radius: 30px;
	background: navy;
	padding: 30px 50px;
	box-shadow: 25px 25px 75px yellow,
	10px 10px 70px darkorchid,
	inset 5px 5px 10px indigo,
	inset 5px 5px 20px lightcoral,
	inset -5px -5px 15px lawngreen;
}
h2 
{
	width: 100%;
	font-weight: 600;
	text-align: center;
	color: #fff;
	font-size: 1.75em;
	margin-bottom: 10px;
}
#inputBx 
{
	position: relative;
	width: 100%;
	border: none;
	outline: none;
	padding: 15px 20px;
	border-radius: 30px;
	font-size: 1em;
	box-shadow: 5px 5px 7px rgba(0,0,0,0.25), inset 2px 2px 5px rgba(0,0,0,0.5), inset -3px -3px 5px rgba(0,0,0,0.5);
}
.box li 
{
	position: relative;
	width: calc(100% - 40px);
	display: flex;
	align-items: center;
	background: #1f83f2;
	margin: 15px 0;
	padding: 10px 10px 10px 45px;
	min-height: 45px;
	cursor: pointer;
	border-radius: 22.5px;
	color: #fff;
	box-shadow: 5px 5px 7px rgba(0,0,0,0.25), inset 2px 2px 5px rgba(0,0,0,0.5), inset -3px -3px 5px rgba(0,0,0,0.5);
}

.box li i 
{
	position: absolute;
	right: -40px;
	width: 30px;
	height: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: mediumblue;
	border-radius: 50%;
	box-shadow: 5px 5px 7px rgba(0,0,0,0.25), inset 2px 2px 5px rgba(255,255,255,0.25), inset -3px -3px 5px rgba(0,0,0,0.5);

}
.box li i::before 
{
	content: '';
	position: absolute;
	width: 15px;
	height: 2px;
	background: #fff;
	transform: rotate(45deg);
}
.box li i::after 
{
	content: '';
	position: absolute;
	width: 15px;
	height: 2px;
	background: #fff;
	transform: rotate(-45deg);
}
.box li::before 
{
	content: '';
	position: absolute;
	left: 8px;
	width: 30px;
	height: 30px;
	background: #2f363e;
	border-radius: 50%;
}
.box li.done 
{
	background: #607d8b;
}
.box li.done:after 
{
	content: '';
	position: absolute;
	left: 16px;
	width: 12px;
	height: 6px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(315deg);
}
#list 
{
	position: relative;
	margin-top: 20px;
	height: 350px;
	overflow-y: auto;
	padding-right: 10px;
}
::-webkit-scrollbar-track 
{
	box-shadow: inset 0 0 15px rgba(0,0,0,0.5);
}
::-webkit-scrollbar 
{
	width: 5px;
}
::-webkit-scrollbar-thumb 
{
	background: #fff;
}
</style>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>2</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="container">
		<div class="box">
			<h2>待办列表</h2>
			<input type="text" placeholder="输入" id="inputBx">
			<ul id="list"></ul>
		</div>
	</div>
	<script src="./daibanliebiao.js"></script>
</body>
</html>